<!--  -->
<template>
  <div>
    <div class="upload">
      <a-upload v-model:file-list="fileList" :accept="'.xlsx, .xls'" :before-upload="beforeUpload" :show-upload-list="false">
        <a style="margin-left: 10px" type="primary">批量导入员工ID </a>
      </a-upload>
      <div v-for="(item, index) in fileNames" :key="index">{{ item }} <a-icon type="delete" @click="del()" /></div>
    </div>
    <a-table :columns="guideColumns" :data-source="guideData" :pagination="false" v-if="guideData.length > 0" :bordered="true"> </a-table>
  </div>
</template>

<script>
import axios from 'axios'
import api from '@/utils/taskapi.js'
export default {
  props: {
    guideInfo: {
      type: Array,
      default: () => []
    }
  },
  created() {
    this.guideData = this.guideInfo
  },
  components: {},
  name: 'ComponentName',
  data() {
    return {
      guideColumns: [
        {
          title: '员工ID',
          dataIndex: 'code',
          key: 'code'
        }
      ],
      guideData: [],
      excelData: '',
      defaultFileList: [],
      fileList: [],
      fileNames: []
    }
  },

  methods: {
    del() {
      this.fileNames = []
      this.excelData = []
      this.guideData = []
      this.sendChooseData()
    },
    //  向父组件发送数据
    sendChooseData() {
      this.$emit('chooseData', this.excelData)
    },
    beforeUpload(file, fileList) {
      this.guideData = []
      this.fileNames = []
      console.log('before   ', file.name)
      this.fileNames.push(file.name)
      console.log(this.fileNames)
      console.log(this.excelData)
      if (file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type == 'application/vnd.ms-excel') {
        this.handleUpload(file)
      } else {
        this.$message.warning('文件格式错误，请重新上传！')
        this.del()
      }
      return false
    },
    async handleUpload(file) {
      console.log(file)
      let formData = new FormData()
      console.log(formData)
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }
      formData.append('file', file)
      // importStoreExcel
      axios.post(api.uploadDealerExecl, formData, config).then(res => {
        console.log(res.data)
        console.log(formData.get('file'))
        let listStr = res.data.data
        console.log('list', listStr)
        this.excelData = listStr
        console.log(this.excelData)
        this.sendChooseData()
        if (this.excelData) {
          let guideDatas = JSON.parse(this.excelData)
          guideDatas.forEach((item, index) => {
            this.guideData.push({ key: index, code: item })
          })
          console.log(this.guideData)
        }
      })
    }
  }
}
</script>
<style>
.upload {
  display: inline-block;
}
.mr {
  margin-right: 5px;
}
.ant-upload-list-item-list-type-text {
  width: 400px !important;
}
</style>
